<div>
    <input type="text" id="keywords">
    <button id="search">搜索</button>
</div>

<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col width="200">
        <col width="200">
        <col width="200">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>爱好</th>
            <th>头像</th>
            <th>注册日期</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {{each res}}
        <tr>
            <td>{{$value.id}}</td>
            <td>{{$value.username}}</td>
            <td>{{$value.hobby}}</td>
            <td><img src="{{$value.icon}}" alt=""></td>
            <td>{{$value.dt}}</td>
            <td><a href="javascript:;" class="view" id="{{$value.id}}">浏览</a>｜<a href="javascript:;" class="edit"
                    id="{{$value.id}}">修改</a>｜<a href="javascript:;" class="del" id="{{$value.id}}">删除</a></td>

        </tr>
        {{/each}}
    </tbody>
</table>
<!-- 分页模块 -->
<div id="test1"></div>


<script>
    layui.use(['layer', 'layedit', 'laydate', 'form', 'jquery', 'laypage'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var layedit = layui.layedit;
        var laypage = layui.laypage;
        // 执行laypage的实例
        laypage.render({
            elem: `test1`,
            // 数据是从路由模块的render中获取
            count: `{{totalRecords}}`,
            limit: `{{pageSize}}`,
            curr: `{{page}}`,
            jump: function (obj, first) {
                if (!first) {
                    $('#showBody').load('/admin/list?page=' + obj.cur + 'keywords=' + `{{keywords}}`)
                }
            }
        });

        $('#search').click(function () {
            let keywords = $("#keywords").val().trim();
            if (!keywords) {
                layer.msg("请输入搜索词");
            } else {
                console.log(keywords);
                $("#showBody").load('/admin/list?keywords=' + keywords)
            }
        })
        // 浏览 
        $('.view').click(function () {
            // 获取当前的id
            let id = $(this).attr('id');
            // 判断id决定是否弹出层
            if (id) {
                // 弹出层
                layer.open({
                    type: 2,
                    title: 'layer mobile页',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['50%', '90%'],
                    content: '/admin/detail?id=' + id //iframe的url
                });
            }

        })

        // 修改
        $('.edit').click(function () {
            // 获取当前的id
            let id = $(this).attr("id");
            // 修改  通过id去获取数据库中的数据
            $("#showBody").load("/admin/edit?id=" + id);
        })
        // 删除
        $('.del').click(function () {
            let id = $(this).attr("id");
            // 删除
            $.get('/admin/del', { id }, res => {
                if (res == "success") {
                    // 重载列表
                    $('#showBody').load("/admin/list");
                    layer.msg("删除成功！")
                }else{
                    layer.msg("删除失败")
                }
            })

        })



    })
</script>